<template>
  <div id="home_header">
    <div class="logo_title">
      <img class="logo" :src="logo" width="60px" alt="" />
      <span id="title">北海市货运源头企业信息采集系统</span>
    </div>
    <div id="userInfo">
      <span id="welcome_msg">欢迎访问北海市货运源头企业信息采集系统！</span>
      <!--      <span id="message" @click="messageClick">消息</span>-->
      <div>
        <el-dropdown>
          <span>
            <el-avatar size="large" :src="circleUrl"></el-avatar>
            <span class="phoneNum">{{ username }}</span>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item style="width: 50px" @click.native="logOutBtnClick"
              >退出
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <el-drawer
      title="消息"
      class="rightDrawer"
      :visible.sync="drawer"
      :direction="direction"
      :modal="false"
      size="30%"
    >
      <div class="msg-list">
        <ul>
          <li class="warnInfo" v-for="item in msgeList" :key="item.id">
            <div>
              <div>
                <el-tag size="mini" type="danger" v-if="item.messageStatus === 0">未读</el-tag>
                <el-tag size="mini" type="success" v-else>已读</el-tag>
                {{ item.content }}
              </div>
              <div style="margin-top: 3px">{{ item.createTime }}</div>
            </div>
            <el-button size="mini" plain type="primary" @click="goDetail(item)">查看</el-button>
          </li>
        </ul>
        <div class="pagination">
          <el-pagination
            layout="prev, next"
            :total="msgTotal"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-drawer>
    <el-dialog title="消息" :visible.sync="msgDialogVisible" width="30%">
      <span>{{ msgDetail }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="msgDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { logOut } from '@/service/login/login'
import { queryMessage, updateMessage } from '../../../service/message/message'
import localCache from '@/utils/localCache'
import logo from '@/assets/img/logo.png'

export default {
  data() {
    return {
      username: '',
      // 消息弹窗
      msgDialogVisible: false,
      msgDetail: '',
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      drawer: false,
      direction: 'rtl',
      queryMessageInfo: {
        pageNum: 1,
        pageSize: 10
      },
      msgeList: [],
      msgTotal: 0
    }
  },
  created() {
    this.username = localCache.getItem('name')
  },
  methods: {
    async logOutBtnClick() {
      const { data } = await logOut()
      if (data.code === 0) {
        localCache.deleteItem('token')
        localCache.deleteItem('name')
        this.$store.commit('m_msg/WEBSOCKET_CLOSED')
        this.$router.replace('/login')
        this.$message({
          message: '退出登录成功',
          type: 'success'
        })
      }
    },
    messageClick() {
      this.drawer = true
      this.getMessageList()
    },
    // 获取消息列表
    async getMessageList() {
      const { data: res } = await queryMessage(this.queryMessageInfo)
      if (res.code !== 0) return
      this.msgeList = res.data.list
      this.msgTotal = res.data.totalCount
    },
    // 消息详情
    async goDetail(item) {
      await updateMessage([item.id]) // 更换消息状态
      this.msgDialogVisible = true
      this.msgDetail = item.content
      await this.getMessageList()
    },
    // 翻页
    handleCurrentChange(val) {
      this.queryMessageInfo.pageNum = val
      this.getMessageList()
    }
  }
}
</script>

<style scoped>
#home_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 37px 0 23px;
}

#title {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
}

#userInfo {
  display: flex;
  align-items: center;
}

#welcome_msg {
  color: #b8bdc0;
  font-size: 14px;
  padding-right: 20px;
}

#message {
  color: #b8bdc0;
  font-size: 14px;
  padding-right: 20px;
  cursor: pointer;
}

.el-avatar {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-right: 10px;
}

.phoneNum {
  color: #b8bdc0;
  font-size: 14px;
  cursor: pointer;
  vertical-align: middle;
}

.rightDrawer >>> .el-drawer__container {
  top: 60px;
  padding: 0 3px;
}

::v-deep .el-drawer__body {
  padding: 0 5px;
}

.msg-list {
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.warnInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f2f6fc;
  margin-top: 5px;
  font-size: 14px;
}

.pagination {
  display: flex;
  justify-content: center;
}
.logo_title {
  display: flex;
  align-items: center;
}
.logo {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
</style>
